<%--
  Created by IntelliJ IDEA.
  User: 86153
  Date: 2021/10/16 016
  Time: 9:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>订单支付</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index-1.css">
    <link href="${pageContext.request.contextPath}/css/headermenu.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/detail.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/footer.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <style>

        /* 头部导航的 */
        .global-header .login-page-header-nav li {
            float: left;
            margin-left: 30px;
        }

        .global-header .login-page-header-nav li i {
            margin-right: 10px;
            font-size: 28px;
            line-height: 1;
            color: #f6a206;
            vertical-align: middle;
        }


        .global-header .login-page-header-nav li span {
            font-size: 14px;
            line-height: 28px;
            color: #666;
            vertical-align: middle;
        }

        input[type="text"] {
            border: 0px;
            background: none;
        }

        .submitBtn {
            display: block;
            border: none;
            background-color: dodgerblue;
            color: white;
            width: 250px;
            height: 30px;
            line-height: 30px;
            text-decoration: none;
            text-align: center;
            margin-top: 10px;

        }
    </style>
</head>
<body>
<header id="J-global-header" class="global-header">
    <div class="top-inner">
        <div id="sitenav" class="global-header-top-nav fn-clear">
            <div class="global-header-top-nav-right">
                <li class="top-nav-menu top-nav-menu-user-info" data-role="user-info" data-test="test">
                    <div class="top-nav-menu-handle">
                        <div class="login">
                            <%--                            <a href="${pageContext.request.contextPath}/login.jsp" class="J-login-btn" rel="nofollow" target="_self">登录/注册</a></div>--%>
                            <c:if test="${empty ServiceResponse}">
                                <a href="${pageContext.request.contextPath}/customer/login.jsp">登录/注册</a>
                            </c:if>

                            <c:if test="${!empty ServiceResponse}">
                                欢迎${ServiceResponse.data.custTelno}
                                <a href="${pageContext.request.contextPath}/logout">退出</a>
                            </c:if>
                        </div>
                    </div>
                </li>

                <li class="top-nav-menu top-nav-multi-menu top-nav-dl-app">
                    <div class="top-nav-menu-handle">
                        <i class="global-header-icon top-nav-dl-app-icon"></i>手机版
                    </div>
                    <div class="top-nav-menu-body top-nav-menu-qrcode">
                        <div class="top-nav-menu-bd-panel">
                            <div class="qrcode-img"></div>
                            <p>下载APP 领99元租车红包

                            </p>
                        </div>
                    </div>
                </li>

                <li class="top-nav-pipe">|</li>

                <li class="top-nav-menu top-nav-multi-menu top-nav-wx-guide">
                    <div class="top-nav-menu-handle"><i class="global-header-icon top-nav-wx-guide-icon"></i>微信</div>
                    <div class="top-nav-menu-body top-nav-menu-qrcode">
                        <div class="top-nav-menu-bd-panel">
                            <div class="qrcode-img"></div>
                            <p>扫一扫，关注微信</p>
                        </div>
                    </div>
                </li>
                <li class="top-nav-menu top-nav-multi-menu top-nav-order-lookup">
                    <div class="top-nav-menu-handle">订单查询<i class="top-nav-arrow"><em></em><span></span></i></div>
                    <div class="top-nav-menu-body top-nav-menu-list">
                        <div class="top-nav-menu-bd-panel">
                            <a href="${pageContext.request.contextPath}/center/myorder.jsp">订单查询</a>
                        </div>
                    </div>
                </li>
                <li class="top-nav-menu top-nav-multi-menu top-nav-order-lookup">
                    <div class="top-nav-menu-handle">个人中心<i class="top-nav-arrow"><em></em><span></span></i></div>
                    <div class="top-nav-menu-body top-nav-menu-list">
                        <div class="top-nav-menu-bd-panel">
                            <a href="${pageContext.request.contextPath}/center/user.jsp">进入个人中心</a>
                        </div>
                    </div>
                </li>
                <li class="top-nav-pipe">|</li>

            </div>

            <div class="global-header-top-nav-left">
                <div class="top-nav-menu top-nav-multi-menu top-nav-contact">
                    <div class="top-nav-menu-handle">
                        24小时客服！内地热线：110-120
                        <i class="top-nav-arrow"><em></em><span></span></i>
                    </div>
                    <div class="top-nav-menu-body top-nav-menu-list">
                        <div class="top-nav-menu-bd-panel">
                            <ul>
                                <li>
                                    <span class="title">中国内地热线</span>
                                    <a href="tel:10101020" target="_self" class="tel-number">110-120</a>
                                </li>
                            </ul>
                            <div class="top-nav-menu-bd-code">
                                <div class="qrcode-img"></div>
                                <p class="title">关注微信公众号</p>
                                <p class="text">可查询/修改/取消订单</p>
                                <a class="J-show-robot" href="javascript:" target="_self"
                                   data-tj="/公用头部/在线客服">24小时在线客服</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/pay.css">
    <div class="toolbar fn-clear">
        <div id="slog" class="logo fn-left">
            <a class="sbx-logo" title="思必行-租车" target="_self" href="">

            </a>
        </div>
        <div class="toolbar-site-header-nav">
            <ul class="login-page-header-nav fn-clear">
                <li><i class="global-login-iconfont"></i><span>有驾照就能租</span></li>
                <li><i class="global-login-iconfont"></i><span>地图导航</span></li>
                <li><i class="global-login-iconfont"></i><span>24小时服务在线</span></li>
            </ul>
        </div>

    </div>
</header>
<div class="nav">
    <ul class="nav-wrap clear_float" id="J_NavBox">
        <li class="menu-index menu-index-on">
            <a href="index.jsp" target="_blank">首页</a>
            <span></span>
        </li>
        <li>
            <a href="selfrental/person_rentalcar.jsp" target="_blank">自驾租车</a>
            <span></span>
        </li>
        <li class>
            <a href="car/car.jsp" target="_blank">车型查询</a>
            <span></span>
        </li>
        <li>
            <a href="memberrent/members.jsp" target="_blank">会员租车</a>
            <span></span>
        </li>
        <li>
            <a href="store/store.jsp" target="_blank">营业网点</a>
            <span></span>
        </li>
        <li>
            <a href="memberrent/wonderful_activity.jsp" target="_blank">精彩活动</a>
            <span></span>
        </li>

    </ul>

</div>
<br>
<div id="app">
    <div class="pay-warp" id="payIndex">
        <div class="order-warp">
            <div class="order-info-box"><h3 class="order-title">订单已提交，请尽快完成付款</h3>
                <%--<div class="order-time"><p>请<span class="font-red">21分19秒</span>内完成支付，逾时订单将自动取消。</p></div>--%>
                <div class="order-time"><p id="page_div">请在<span class="font-red">99秒</span>内完成支付，逾时订单将自动取消</p></div>
                <div class="order-info"></div>

                <div class="price-box">需支付: <span class="price"> <em>¥</em>${order.orderPrice} </span>
                    <ul class="price-detail">
                        <li><span>租车订单</span><em></em><b>${order.orderPrice}</b></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="pay-content">
            <div class="pay-type-content"><h3>在线支付: <span class="pirce-text">¥${order.orderPrice}</span></h3>
                <div class="platform">
                    <div class="pay-section"><h5>支付平台</h5>
                        <ul class="pay-lists">
                            <%--<li class="li-item wechat_pay"></li>
                            <li class="li-item alipay"></li>--%>
                            <form id="payForm" action="${pageContext.request.contextPath}/ali/pay" method="post">
                                <input type="hidden" name="myorderId" value="${order.orderId}"/>
                                租车人： <input type="text" name="rentalCarName" value="${order.carRentname}"/><br/>
                                商品详情: <input type="text" name="orderDetail" value="租车订单"/><br/>
                                订单编号: <input type="text" name="orderNum" value="${order.orderNum}"/><br/>
                                订单日期: <input type="text" name="dateTime" value="${order.orderDate}"/><br/>
                                <input type="hidden" name="carId" value="${order.carId}">
                                <input type="hidden" name="custId" value="${order.custId}">
                                <input type="hidden" name="orderPrice" value="${order.orderPrice}">
                                <input class="submitBtn" type="submit" value="前往支付宝进行支付">
                            </form>
                        </ul>
                    </div>
                    <div class="pay-section"><h5>大陆地区银行卡 <span>（支持以下各银行的信用卡和储蓄卡，免手续费）</span></h5>
                        <ul class="pay-lists">
                            <li class="li-item commCard"></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<footer class="global-footer fn-clear">

    <div class="zuche-bottom-info">
        <div class="box">
            <h3>关于</h3>
            <ul>
                <li><a rel="nofollow" href="" target="_blank">关于我们</a></li>
                <li><a rel="nofollow" href="" target="_blank">联系我们</a></li>
                <li><a rel="nofollow" href="" target="_blank">加入我们</a></li>
                <li><a rel="nofollow" href="" target="_blank">媒体报道</a></li>


            </ul>
        </div>
        <div class="box">
            <h3>条款</h3>
            <ul>
                <li><a rel="nofollow" href="" target="_blank">隐私条款</a></li>
                <li><a rel="nofollow" target="_blank" href="">用户协议</a></li>
                <li><a rel="nofollow" target="_blank" href="">信息处置制度</a></li>
                <li><a rel="nofollow" target="_blank" href="">租车规则</a></li>

            </ul>
        </div>
        <div class="box">
            <h3>帮助</h3>
            <ul>
                <li><a rel="nofollow" href="" target="_blank">客服中心</a></li>
                <li><a rel="nofollow" href="" target="_blank">互助问答</a></li>
                <li><a rel="nofollow" href="" target="_blank">常见问题</a></li>
                <li><a rel="nofollow" href="" target="_blank">出游安全提示</a></li>
            </ul>
        </div>

        <div class="box box_r">
            <div class="global-footer-icon wei-img fn-right">
                <!-- <em>微<br>信<br>公<br>众<br>号</em> -->
            </div>

            <div class="fn-right zzc_phone">
                <h4 class="service-title">客服热线</h4>
                <p class="title"><span class="sub">中国内地拨打：</span>1010-1020</p>
                <p class="text"><span class="sub">其他地区拨打： </span>+86-10-6064-1387</p>
                <a class="J-show-robot" href="javascript:;" target="_self" data-tj="/公用尾部/在线客服"
                   style="width: auto">在线客服</a>
            </div>

        </div>

        <div class="fn-clear"></div>
    </div>
    <div class="credential">
        <h3 class="credential-title">资质证书</h3>
        <ul class="credential-list">
            <li><a href="" target="_blank" rel="nofollow"><i class="icon certificate"></i></a></li>
            <li><a href="" target="_blank" rel="nofollow"><i class="icon zfb_qc"></i></a></li>
            <li><a href="" target="_blank" rel="nofollow"><i class="icon baidu_rz"></i></a></li>
            <li><a href="" target="_blank" rel="nofollow"><i class="icon shi_ming"></i></a></li>
            <li><a href="" target="_blank" rel="nofollow"><i class="icon chengxin"></i></a></li>
            <li><a href="" target="_blank" rel="nofollow"><i class="icon kexin"></i></a></li>
            <li><a id="_pingansec_bottomimagesmall_shiming" href="" target="_blank" rel="nofollow"><i
                    class="icon trustutn"></i></a></li>
        </ul>
    </div>
    <div class="copyright-box">
        <p>© 2011-2021 sbx.com&nbsp;&nbsp;思必行有限公司&nbsp;&nbsp;版权所有&nbsp;
            <a target="_blank" href="">营业执照</a>&nbsp;&nbsp;
            <a rel="nofollow" target="_blank" href="">苏ICP备114471007328号</a>&nbsp;&nbsp;
            <a rel="nofollow" target="_blank" href="" style="position: relative;padding-left: 24px;">
                <img src="" style="position: absolute;left: 0;top: -2px;">苏公网安备 44010602045644号
            </a>
        </p>
    </div>
</footer>
<script>
    var num = 99; //倒计时的秒数
    var URL = "${pageContext.request.contextPath}/waitPay/${order.orderId}";
    var id = window.setInterval('doUpdate()', 1000);

    function doUpdate() {
        document.getElementById('page_div').innerHTML = '请在' + num + '秒内完成支付，逾时订单将自动取消';
        if (num == 0) {
            window.clearInterval(id);
            window.location = URL;
        }
        num--;
    }
</script>


</body>
</html>